<template>
  <div class="container">
    <!-- 卡片视图区域 -->
    <el-card>
      <div class="search">
        <div class="search-left">
          <p>关键字</p>
          <el-input placeholder="根据编号搜索" v-model="queryInfo.keyword" @clear="getCaseList">
          </el-input>
        </div>
        <div class="search-right">
          <el-button size="small" @click="queryInfo.keyword = ''">清除</el-button>
          <el-button type="primary" size="small" @click="getCaseList">搜索</el-button>
        </div>
      </div>
      <div class="total">
        <i>i</i>
        <span>数据一共{{ total }}条</span>
      </div>
      <!-- 显示列表区域 -->
      <el-table :data="testCaseList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="200">
        </el-table-column>
        <!--题型标签  -->
        <el-table-column label="题型">
          <template slot-scope="scope">
            <i v-if="scope.row.questionType == 1">简答</i>
            <i v-else-if="scope.row.questionType == 2">单选</i>
            <i v-else>多选</i>
          </template>
        </el-table-column>
        <!--题目编号  -->
        <el-table-column prop="questionIDs" label="题目编号" width="200">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.questionIDs" :key="index" style="color: #0099ff">
              {{ item.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="200">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle size="small" plain
              @click="removeById(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能模块 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[5, 10, 15, 25]" :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes,jumper" :total="total" background>
      </el-pagination>
    </el-card>

    <!-- 题目预览模块 -->
    <el-dialog title="题目预览" :visible.sync="caseDetailVisible" width="900px">
      <ul class="caseAbout">
        <li>【编号】：单选题</li>
        <li>【编号】：23</li>
        <li>【编号】：困难</li>
        <li>【编号】：属性</li>
        <li>【编号】：前端</li>
        <li>【编号】：css基础</li>
        <li>【编号】：互联网</li>
        <li></li>
      </ul>
      <div class="caseDetail">
        <p>【题干】：</p>
        <span>随便啦</span>
        <p>{{}} 选项：（以下选中的选项为正确答案）</p>
        <el-checkbox v-model="checked">备选项</el-checkbox>
        <el-checkbox v-model="checked">备选项</el-checkbox>
        <el-checkbox v-model="checked">备选项</el-checkbox>
      </div>
      <div class="caseAnswer">
        <span>【参考答案】：</span>
        <el-button type="danger" size="small">视频答案预览</el-button>
      </div>
      <div class="caseParse">
        <span>【答案解析】：</span>
      </div>
      <div class="caseremark">
        <span>【题目备注】：</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 按需导入
import { randoms } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      input: '', // 输入框输入内容
      total: 0, // 数据的总条数
      // 用户请求参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      // 题组列表
      testCaseList: [],
      // 控制预览模块是否显示
      caseDetailVisible: false
    }
  },
  created () {
    // 自调用
    this.getCaseList()
  },
  computed: {
    // 获取真正id数据
    getType (id) {
      if (id === '1') {
        return '简答题'
      } else if (id === '2') {
        return '单选题'
      } else {
        return '多选题'
      }
    }
  },
  methods: {
    // 获取题组列表
    async getCaseList () {
      try {
        const { data } = await randoms({
          params: this.queryInfo
        })
        this.total = data.counts
        this.testCaseList = data.items
        this.$message.success('获取商品列表成功!')
        console.log(this.testCaseList)
      } catch (err) {
        console.log(err)
        this.$message.error('获取列表失败！')
      }
    },
    // 同步分页功能的页面数量
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      console.log(this.queryInfo.pagesize)
      this.getCaseList()
    },
    // 同步分页功能的页面
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      console.log(this.queryInfo.page)
      this.getCaseList()
    },
    // 删除单个列表项
    async removeById (val) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该题组, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      // 请求
      console.log(333)
      const ret = await this.removeRandoms()
      console.log(ret)
      this.$message.success('删除成功!')
      this.getCaseList()
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  .search {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      justify-content: space-between;
      p {
        width: 100px;
        margin: 0;
        margin-left: 20px;
        line-height: 40px;
      }
    }
  }
  .total {
    background-color: #f4f4f5;
    width: 100%;
    padding: 8px 16px;
    margin: 8px 0;
    color: #909399;
    font-size: 13px;
    display: flex;
    i {
      display: block;
      width: 14px;
      height: 14px;
      // padding: 8px;
      border-radius: 50%;
      background-color: #909399;
      color: #fff;
      padding-left: 5px;
      line-height: 14px;
      margin-right: 4px;
      margin-bottom: 2px;
    }
  }
  .el-table {
    margin-top: 15px;
  }
  .el-pagination {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
}

.el-dialog {
  .caseAbout {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    li {
      flex: 25%;

      &:nth-child(n + 5) {
        padding-top: 20px;
      }
    }
  }
  .caseDetail {
    padding-top: 5px;
    border-top: 1px solid #9a9a9a;
    span {
      color: #0000ff;
    }
    .el-checkbox {
      display: flex;
      // flex-direction: column;
      margin-bottom: 10px;
      ::v-deep.el-checkbox__label {
        line-height: 15px;
      }
    }
  }
  .caseAnswer {
    padding: 10px 0;
    border-top: 1px solid#9a9a9a;
  }
  .caseParse {
    border-top: 1px solid#9a9a9a;
    padding: 20px 0;
  }
  .caseremark {
    border-top: 1px solid#9a9a9a;
    padding: 10px 0;
  }
}
</style>
